<template>
  <view :class="['vh100', { dark: theme == 'dark' }]">
    <view
      class="flex alcenter h50 h69 plr15 between bdb1f langs"
      v-for="(item, i) in languages"
      :key="i"
      @tap="changeLang(item.type)"
    >
      <text>{{ item.name }}</text>
      <image
        src="../../static/image/nike.png"
        class="wt15 h15"
        v-show="item.type == lang"
      ></image>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { myMixins } from '@/common/myMixins.js';
export default {
  mixins: [myMixins],
  data() {
    return {
      lang: '',
      languages: [
        { name: 'بالعربية', type: 'ab' },
        { name: 'English', type: 'en' },
        { name: '日本語', type: 'jp' },
        { name: '韩语', type: 'hy' },
        { name: '繁体中文', type: 'hk' },
        { name: '简体中文', type: 'zh' }
      ]
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('home').lang
    });
    this.lang = uni.getStorageSync('lang') || 'ab';
    this.$utils.setTheme(this.theme);
  },
  methods: {
    changeLang(lang) {
      this.lang = lang;
      uni.setLocale(lang);
      uni.setStorageSync('lang', lang);
      this.$i18n.locale = lang;
      uni.setNavigationBarTitle({
        title: this.$t('home').lang
      });
      window.location.reload();
    }
  }
};
</script>

<style>
.h50 {
  height: 15vw;
}
.h69 {
  font-size: 4vw;
}
* {
  font-size: 4vw !important;
}
.h15 {
  height: 6vw;
}

.wt15 {
  width: 10vw;
}
</style>
